"use strict";
import React from "react";
import ReactDOM from "react-dom";
import { History, Lifecycle } from "react-router";
import Reflux from "reflux";
import $ from "jquery";
import _ from "lodash";

import IScroll from "./iscroll.jsx";

import { CONFIG } from "../common/config.js";
import { GOTOMixin } from "./mixins.jsx";
import { UserStore } from "../store/userstore.js";
import { getISODate } from "../common/datehelper.js";
import { HelpStore, HelpActions } from "../store/helpstore.js";


var PageHelp = React.createClass({
	mixins: [History, GOTOMixin, Reflux.connect(HelpStore, 'data') ], // Reflux.connect(FundlistStore, "fundlist"),],
	getInitialState: function(){
		return {};
	},
	componentDidMount: function(){
		var parent = ReactDOM.findDOMNode(this);
		var parent = $(parent).parent();
		var className = parent.attr('class');
		if(className != 'page_bargain'){
			parent.attr('class', 'page_bargain');
		}

		HelpActions.fetchData();
	},
	render: function(){
		var ds_help = _.get(this.state.data, 'ds_help', {});
		var helpText = _.get(ds_help, 'text', null);
		var loading = null;
		if(helpText == null){
			loading = (
			<div id="msg_dialog">
				<div className="popup_main_bg"></div>
				<div className="popup_main">
					<div className="mid_main">
						<i className="icon-spin icon-spinner"></i>
					</div>
				</div>
			</div>
			);
		}
		return (
			<div id="container" className="container">
				<header id="header">
					<span className="back_btn" onTouchTap={this.gotoIndex}><i className="icon-angle-left"></i></span>
					<span className="header_title"><span>舵手系统使用说明</span></span>
				</header>
				<IScroll>
				<div id="page_main" style={{minHeight: screen.height-42}}>
					<div className="list_topMain"> 
						<div dangerouslySetInnerHTML={{__html: helpText}}></div>
					</div>
				</div>

				{loading}	

				</IScroll>
			</div>
		)
	}
})

export { PageHelp };